<template>
  <div class="show">
    <!-- 头部搜索 -->
    <div class="search">
      <el-row>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-input v-model="input" placeholder="输入你想搜索的项目名称" clearable></el-input>
            <el-button type="success" plain @click="search">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <el-button type="primary" @click="addViews('addfrom')">添加项目</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <el-table :data="userList" style="width: 100%" border stripe>
      <el-table-column align="center" type="index" label="#" width="40"></el-table-column>
      <el-table-column align="center" prop="pname" label="项目名称"></el-table-column>
      <el-table-column align="center" prop="sage" label="合适年龄"></el-table-column>
      <el-table-column align="center" prop="sgender" label="合适性别">
        <template slot-scope="scope">
            <span v-if="scope.row.sgender == 0">女</span>
            <span v-if="scope.row.sgender == 1">男</span>
            <span v-if="scope.row.sgender == 2">都合适</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="项目类别"></el-table-column>
      <el-table-column align="center" prop="department" label="所属科室"></el-table-column>
      <el-table-column align="center" label="操作" width="130">
        <template v-slot="scope">
          <!-- 修改 -->
          <el-tooltip class="item" effect="dark" content="修改" placement="top" :enterable="false">
            <el-button type="primary" icon="el-icon-edit" circle @click="queryProjectById(scope.row.pid)"></el-button>
          </el-tooltip>
          <!-- 删除 -->
          <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
            <el-button
              type="danger"
              icon="el-icon-delete-solid"
              circle
              @click="delProject(scope.row.pid)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:20px">   
      <el-pagination 
        class="mpage"
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="queryProjectPage">
      </el-pagination>
    </div>
    <!-- 添加项目弹出层-->
    <el-dialog title="添加项目" :visible.sync="adddialogVisible" width="50%">
      <el-form ref="addfrom" :model="addfrom" :rules="rules" class="demo-ruleForm" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
              <el-form-item label="项目名称" prop="pname">
                  <el-input v-model="addfrom.pname"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="合适年龄" prop="sage">
                  <el-input v-model="addfrom.sage"/>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item label="项目类别" prop="type">
                  <el-input v-model="addfrom.type"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="所属科室" prop="department">
                  <el-input v-model="addfrom.department"/>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item label="合适性别" prop="sgender">
                  <el-select v-model="addfrom.sgender" placeholder="请选择">
                    <el-option
                            v-for="item in genderList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
        </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addfrom')">清 空</el-button>
        <el-button type="primary" @click="upForm">新 增</el-button>
      </span>
    </el-dialog>

    <!-- 修改项目信息弹出层 -->
    <el-dialog title="修改项目" :visible.sync="updateDialogVisible" width="50%">
      <el-form ref="updatefrom" :model="updatefrom" :rules="updateRules" class="demo-ruleForm" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
              <el-form-item label="项目名称" prop="pname">
                  <el-input v-model="updatefrom.pname"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="合适年龄" prop="sage">
                  <el-input v-model="updatefrom.sage"/>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item label="项目类别" prop="type">
                  <el-input v-model="updatefrom.type"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="所属科室" prop="department">
                  <el-input v-model="updatefrom.department"/>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item label="合适性别" prop="sgender">
                  <el-select v-model="updatefrom.sgender" placeholder="请选择">
                    <el-option
                            v-for="item in genderList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
        </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setForm()">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
     

<script>
//引入时间工具类
  import {dateFormat} from '../../assets/js/tools'
export default {
  
  name: "show",
  data() {
    return {
      //分页信息
      currentPage: 1,
      total: 0,
      pageSize: 9,
      //用户信息
      userList:[
        {
          time:''
        }
      ],
      //角色信息
      roleList:[],
      userId:'',
      //修改项目表单数据
      updatefrom: {
        uid:'',
        account: '',
        password: '',
        name: '',
        number: '',
        gender: '',
        phone: '',
        age: '',
        backup: '',
        address: '',
        status:'',
        rid:'',
        rname:''
      },
      //新增项目表单数据
      addfrom: {
        account: '',
        password: '',
        name: '',
        number: '',
        gender: '',
        phone: '',
        age: '',
        backup: '',
        address: '',
        status:''
      },
      //性别
      genderList: [{
          value: '0',
          label: '女'
      }, {
          value: '1',
          label: '男'
      }, {
          value: '2',
          label: '都合适'
      }
      ],
      //状态
      statusList: [{
          value: '0',
          label: '异常'
      }, {
          value: '1',
          label: '正常'
      }],
      // 输入的搜索内容
      input: "",
      //   添加对话框的显示隐藏
      adddialogVisible: false,
      //   添加表单的验证规则
      rules: {
        pname: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }],
        sage: [{ required: true, message: '合适年龄为必填项', trigger: 'blur' }],
        type: [{ required: true, message: '项目类别为必填项', trigger: 'blur' }],
        department: [{ required: true, message: '所属科室为必填项', trigger: 'blur' }],
        sgender: [{ required: true, message: '合适性别为必选项', trigger: 'change' }],
      },
      //修改表单的验证规则
      updateRules: {
        pname: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }],
        sage: [{ required: true, message: '合适年龄为必填项', trigger: 'blur' }],
        type: [{ required: true, message: '项目类别为必填项', trigger: 'blur' }],
        department: [{ required: true, message: '所属科室为必填项', trigger: 'blur' }],
        sgender: [{ required: true, message: '合适性别为必选项', trigger: 'change' }],
      },
    };
  },
  props: ["post"],
  created() {
    let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));//取值;
    this.userId = userInfo[0].uid;
    //查询所有项目
    // this.queryUser();
    //分页查询所有项目
    this.queryProjectPage(this.currentPage,this.pageSize,'');
    //查询所有角色
    // this.queryRole();
  },
  methods: {
    //弹出编辑用户窗口
    queryProjectById(pid) {
      // 请求该用户的数据
      this.axios
        .get("/api/queryProjectById", {
          params: {
            pid: pid
          }
        })
        .then(response => {
          this.updatefrom = response.data[0];
        })
        .catch(error => {
          console.log(error);
        });
      // 展示编辑对话框
      this.updateDialogVisible = true;
    },
    //修改取消
    cancel(){
        this.updateDialogVisible = false;
        this.$message.info("修改操作取消");
    },
    // 提交修改信息
    setForm() {
      this.$refs.updatefrom.validate(valid => {
        if (valid) {
          this.axios.post("/api/updateProject", this.updatefrom).then(res => {
            if (res.data.code !== 200) {
              return this.$message.error({
                duration: 800,
                message: "修改失败"
              });
            }else{
              this.$message.success({
                duration: 800,
                message: "修改成功"
              });
              // 隐藏对话框
              this.updateDialogVisible = false; 
              // 刷新用户列表数据 
              this.queryProjectPage(this.currentPage,this.pageSize,'');
              // 清空修改表单数据 
              this.resetForm('updatefrom');
            }
          });
        } else {
          console.log("表单数据有错误");
          return false;
        }
      });
    },
    //弹出新增项目窗口
    addViews(){
      this.adddialogVisible=true;
    },
    // 提交添加项目表单
    upForm() {
      this.$refs.addfrom.validate(valid => {
        if (valid) {
          this.axios.post("/api/addProject", this.addfrom).then(res => {
            if (res.data.code !== 200) {
              return this.$message.error({
                duration: 800,
                message: "添加失败"
              });
            }else{
              this.$message.success({
                duration: 800,
                message: "添加成功"
              });
              // 隐藏对话框
              this.adddialogVisible = false; 
              //如果返回的数据等于9或者大于9、当前页大于等于1当前页+1
              if(this.userList.length>=9 && this.currentPage >1){
                this.currentPage = this.currentPage + 1;
              }
              // 刷新项目列表数据 
              this.queryProjectPage(this.currentPage,this.pageSize,'');
              // 清空新增表单数据 
              this.resetForm('addfrom');
            }
          });
        } else {
          console.log("表单数据有错误");
          return false;
        }
      });
    },
    //查询所有用户
    queryUser(){
      let _this = this;
      //发送异步请求
      this.axios.get("/api/queryUser",{
      }).then(res => {
        _this.userList = res.data;
        for(var i = 0;i<=_this.userList.length;i++){
          _this.userList[i].time = dateFormat(_this.userList[i].time); 
        }
      });
    },
    //当前页改变时会触发
    handleCurrentChange(val){

      console.log("触发时的当前页",val);
      this.currentPage = val;
    },
    //分页查询所有项目
    queryProjectPage(currentPage,pageSize,pname){
      console.log(pname)
      console.log(currentPage,",",pageSize)
      this.currentPage = currentPage;
      let _this = this;
      //发送异步请求
      this.axios.get("/api/queryProjectPage",{
        params:{
          currentPage: currentPage,
          pageSize: pageSize,
          pname: pname
        }
      }).then(res => {
        
        _this.userList = res.data;
        _this.total = parseInt(res.data[0].backup3);
        for(var i = 0;i<=_this.userList.length;i++){
          _this.userList[i].time = dateFormat(_this.userList[i].time); 
        }
      });
    },
    // 删除项目
    async delProject(pid) {
      const confirmRes = await this.$confirm(
        "是否确定永久删除该项目?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      // 确认删除返回的是 confirm 字符串
      // 取消删除返回的是 cancel 字符串
      if (confirmRes !== "confirm") {
        return this.$message.error({
          duration: 800,
          message: "已取消删除"
        });
      }
      this.axios
        .get("/api/delProject", {
          params: {
            pid: pid
          }
        })
        .then(res => {
          if (res.data.code !== 200) {
            return this.$message.error({
              duration: 800,
              message: "删除失败"
            });
          }
          this.$message.success({
            duration: 800,
            message: "删除成功"
          });
          // 刷新项目列表
          this.queryProjectPage(this.currentPage,this.pageSize,'');
        });
    },
    //查询所有角色
    queryRole(){
      let _this = this;
      //发送异步请求
      this.axios.get("/api/queryRole",{
      }).then(res => {
        _this.roleList = res.data;
      });
    },

    // 清空添加用户表单
    resetForm(addfrom) {
       this.$refs[addfrom].resetFields();
    },
    // 按照搜索内容搜索员工
    search(){
      this.queryProjectPage(1,this.pageSize,this.input);
    }
  }
};
</script>


<style lang="less" scoped>
.show {
  .search {
    margin-top: 15px;
    .el-input {
      width: 300px;
      margin: 0 30px;
    }
    .el-button {
      width: 100px;
    }
  }
  .el-table {
    margin-top: 40px;
  }
}
</style>
